<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element UI Dashboard with ECharts</title>
  <!-- Import Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- Import Vue and Element UI JS -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- Import ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    }

    #app {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* Header Styles */
    .header {
      height: 60px;
      background-color: #bd1f1f;
      color: rgb(19, 5, 5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    }

    .header-left {
      font-size: 20px;
      font-weight: bold;
    }

    .header-right {
      display: flex;
      align-items: center;
    }

    /* Main Content Styles */
    .main-content {
      flex: 1;
      overflow: auto;
      padding: 15px;
      background-color: #f5f7fa;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 15px;
      height: 100%;
    }

    .chart-box {
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    .chart-container {
      width: 100%;
      height: 100%;
    }

    /* Footer Styles */
    .footer {
      height: 50px;
      background-color: #409EFF;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }

    /* Responsive adjustments */
    @media (max-width: 992px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
      }
    }

    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, 1fr);
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- Header Section -->
    <div class="header">
      <div class="header-left">
        Dashboard
      </div>
      <div class="header-right">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            Menu<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="dashboard">Dashboard</el-dropdown-item>
            <el-dropdown-item command="settings">Settings</el-dropdown-item>
            <el-dropdown-item command="reports">Reports</el-dropdown-item>
            <el-dropdown-item divided command="logout">Logout</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- Main Content Section -->
    <div class="main-content">
      <div class="grid-container">
        <div class="chart-box" v-for="(chart, index) in charts" :key="index">
          <div class="chart-container" :ref="'chart' + (index + 1)"></div>
        </div>
      </div>
    </div>

    <!-- Footer Section -->
    <div class="footer">
      © {{ currentYear }} Dashboard. All rights reserved.
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          currentYear: new Date().getFullYear(),
          charts: [
            { title: 'Line Chart', type: 'line' },
            { title: 'Bar Chart', type: 'bar' },
            { title: 'Pie Chart', type: 'pie' },
            { title: 'Scatter Chart', type: 'scatter' },
            { title: 'Radar Chart', type: 'radar' },
            { title: 'Gauge Chart', type: 'gauge' },
            { title: 'Funnel Chart', type: 'funnel' },
            { title: 'Heatmap', type: 'heatmap' },
            { title: 'Theme River', type: 'themeRiver' }
          ]
        }
      },
      mounted() {
        // Initialize all charts
        this.initCharts();

        // Add resize event listener
        window.addEventListener('resize', this.resizeCharts);
      },
      beforeDestroy() {
        // Remove resize event listener
        window.removeEventListener('resize', this.resizeCharts);
      },
      methods: {
        handleCommand(command) {
          this.$message(`Clicked on ${command}`);
        },
        initCharts() {
          // Initialize each chart
          this.charts.forEach((chart, index) => {
            const chartDom = this.$refs[`chart${index + 1}`][0];
            const myChart = echarts.init(chartDom);

            // Set chart options based on type
            switch(chart.type) {
              case 'line':
                myChart.setOption(this.getLineOption());
                break;
              case 'bar':
                myChart.setOption(this.getBarOption());
                break;
              case 'pie':
                myChart.setOption(this.getPieOption());
                break;
              case 'scatter':
                myChart.setOption(this.getScatterOption());
                break;
              case 'radar':
                myChart.setOption(this.getRadarOption());
                break;
              case 'gauge':
                myChart.setOption(this.getGaugeOption());
                break;
              case 'funnel':
                myChart.setOption(this.getFunnelOption());
                break;
              case 'heatmap':
                myChart.setOption(this.getHeatmapOption());
                break;
              case 'themeRiver':
                myChart.setOption(this.getThemeRiverOption());
                break;
            }

            // Store chart instance
            chart.instance = myChart;
          });
        },
        resizeCharts() {
          this.charts.forEach(chart => {
            if (chart.instance) {
              chart.instance.resize();
            }
          });
        },
        // Chart option configurations
        getLineOption() {
          return {
            title: { text: 'Line Chart', left: 'center' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
            yAxis: { type: 'value' },
            series: [{
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
              smooth: true,
              areaStyle: { color: 'rgba(64, 158, 255, 0.2)' }
            }]
          };
        },
        getBarOption() {
          return {
            title: { text: 'Bar Chart', left: 'center' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
            yAxis: { type: 'value' },
            series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              itemStyle: { color: '#409EFF' }
            }]
          };
        },
        getPieOption() {
          return {
            title: { text: 'Pie Chart', left: 'center' },
            tooltip: { trigger: 'item' },
            legend: { orient: 'vertical', left: 'left' },
            series: [{
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
          };
        },
        getScatterOption() {
          return {
            title: { text: 'Scatter Chart', left: 'center' },
            xAxis: {},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [
                [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33],
                [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter',
              itemStyle: { color: '#409EFF' }
            }]
          };
        },
        getRadarOption() {
          return {
            title: { text: 'Radar Chart', left: 'center' },
            legend: { data: ['Allocated Budget', 'Actual Spending'] },
            radar: {
              indicator: [
                { name: 'Sales', max: 6500 },
                { name: 'Administration', max: 16000 },
                { name: 'IT', max: 30000 },
                { name: 'Support', max: 38000 },
                { name: 'Development', max: 52000 },
                { name: 'Marketing', max: 25000 }
              ]
            },
            series: [{
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                { value: [4200, 3000, 20000, 35000, 50000, 18000], name: 'Allocated Budget' },
                { value: [5000, 14000, 28000, 26000, 42000, 21000], name: 'Actual Spending' }
              ]
            }]
          };
        },
        getGaugeOption() {
          return {
            title: { text: 'Gauge Chart', left: 'center' },
            series: [{
              type: 'gauge',
              progress: { show: true, width: 18 },
              axisLine: { lineStyle: { width: 18 } },
              axisTick: { show: false },
              splitLine: { length: 15, lineStyle: { width: 2, color: '#999' }},
              axisLabel: { distance: 25, color: '#999', fontSize: 12 },
              detail: { valueAnimation: true, fontSize: 20, offsetCenter: [0, '70%'] },
              data: [{ value: 70 }]
            }]
          };
        },
        getFunnelOption() {
          return {
            title: { text: 'Funnel Chart', left: 'center' },
            tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' },
            legend: { data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'] },
            series: [{
              name: 'Funnel',
              type: 'funnel',
              left: '10%',
              top: 60,
              bottom: 60,
              width: '80%',
              sort: 'descending',
              label: { show: true, position: 'inside' },
              labelLine: { length: 10, lineStyle: { width: 1, type: 'solid' }},
              itemStyle: { borderColor: '#fff', borderWidth: 1 },
              data: [
                { value: 60, name: 'Visit' },
                { value: 40, name: 'Inquiry' },
                { value: 20, name: 'Order' },
                { value: 80, name: 'Click' },
                { value: 100, name: 'Show' }
              ]
            }]
          };
        },
        getHeatmapOption() {
          return {
            title: { text: 'Heatmap', left: 'center' },
            tooltip: { position: 'top' },
            grid: { height: '80%', top: '10%' },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              splitArea: { show: true }
            },
            yAxis: {
              type: 'category',
              data: ['Morning', 'Afternoon', 'Evening'],
              splitArea: { show: true }
            },
            visualMap: {
              min: 0, max: 10,
              calculable: true,
              orient: 'horizontal',
              left: 'center',
              bottom: '0%',
              inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'] }
            },
            series: [{
              name: 'Activity',
              type: 'heatmap',
              data: [
                [0, 0, 5], [1, 0, 7], [2, 0, 3], [3, 0, 5], [4, 0, 8], [5, 0, 4], [6, 0, 6],
                [0, 1, 7], [1, 1, 6], [2, 1, 9], [3, 1, 4], [4, 1, 7], [5, 1, 3], [6, 1, 2],
                [0, 2, 1], [1, 2, 2], [2, 2, 3], [3, 2, 1], [4, 2, 5], [5, 2, 8], [6, 2, 2]
              ],
              label: { show: false },
              emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' }}
            }]
          };
        },
        getThemeRiverOption() {
          return {
            title: { text: 'Theme River', left: 'center' },
            tooltip: { trigger: 'axis', axisPointer: { type: 'line' }},
            legend: { data: ['Product A', 'Product B', 'Product C'] },
            singleAxis: { top: 50, bottom: 50, type: 'time' },
            series: [{
              type: 'themeRiver',
              emphasis: { itemStyle: { shadowBlur: 20, shadowColor: 'rgba(0, 0, 0, 0.8)' }},
              data: [
                ['2015/11/08', 10, 'Product A'], ['2015/11/09', 15, 'Product A'], ['2015/11/10', 35, 'Product A'],
                ['2015/11/11', 38, 'Product A'], ['2015/11/12', 22, 'Product A'], ['2015/11/13', 16, 'Product A'],
                ['2015/11/14', 7, 'Product A'], ['2015/11/15', 2, 'Product A'], ['2015/11/16', 17, 'Product A'],
                ['2015/11/17', 33, 'Product A'], ['2015/11/18', 40, 'Product A'], ['2015/11/19', 32, 'Product A'],
                ['2015/11/20', 26, 'Product A'], ['2015/11/21', 35, 'Product A'], ['2015/11/22', 40, 'Product A'],
                ['2015/11/23', 32, 'Product A'], ['2015/11/24', 26, 'Product A'], ['2015/11/25', 22, 'Product A'],
                ['2015/11/26', 16, 'Product A'], ['2015/11/27', 22, 'Product A'], ['2015/11/28', 10, 'Product A'],
                ['2015/11/08', 35, 'Product B'], ['2015/11/09', 36, 'Product B'], ['2015/11/10', 37, 'Product B'],
                ['2015/11/11', 22, 'Product B'], ['2015/11/12', 24, 'Product B'], ['2015/11/13', 26, 'Product B'],
                ['2015/11/14', 34, 'Product B'], ['2015/11/15', 21, 'Product B'], ['2015/11/16', 18, 'Product B'],
                ['2015/11/17', 45, 'Product B'], ['2015/11/18', 32, 'Product B'], ['2015/11/19', 35, 'Product B'],
                ['2015/11/20', 30, 'Product B'], ['2015/11/21', 28, 'Product B'], ['2015/11/22', 27, 'Product B'],
                ['2015/11/23', 26, 'Product B'], ['2015/11/24', 15, 'Product B'], ['2015/11/25', 30, 'Product B'],
                ['2015/11/26', 35, 'Product B'], ['2015/11/27', 42, 'Product B'], ['2015/11/28', 42, 'Product B'],
                ['2015/11/08', 5, 'Product C'], ['2015/11/09', 4, 'Product C'], ['2015/11/10', 3, 'Product C'],
                ['2015/11/11', 5, 'Product C'], ['2015/11/12', 8, 'Product C'], ['2015/11/13', 4, 'Product C'],
                ['2015/11/14', 6, 'Product C'], ['2015/11/15', 7, 'Product C'], ['2015/11/16', 8, 'Product C'],
                ['2015/11/17', 9, 'Product C'], ['2015/11/18', 10, 'Product C'], ['2015/11/19', 12, 'Product C'],
                ['2015/11/20', 16, 'Product C'], ['2015/11/21', 15, 'Product C'], ['2015/11/22', 14, 'Product C'],
                ['2015/11/23', 13, 'Product C'], ['2015/11/24', 12, 'Product C'], ['2015/11/25', 11, 'Product C'],
                ['2015/11/26', 10, 'Product C'], ['2015/11/27', 9, 'Product C'], ['2015/11/28', 8, 'Product C']
              ]
            }]
          };
        }
      }
    });
  </script>
</body>
</html>